import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

const Color _textColor = Color(0xff2B2B2B);

typedef _InputCallBack = void Function(String value);
typedef _InputSubmitted = void Function(String value);

class JhTextField extends StatefulWidget {
  final String? text;
  final String? hintText;
  final String? labelText; //top提示文字
  final TextEditingController? controller;
  final TextInputType? keyboardType;
  final bool? isOnclick;
  final TextInputAction? textInputAction; //键盘搜索
  final FocusNode? focusNode;
  final bool? isPwd; //是否是密码，默认不是
  final Widget? leftWidget; //左侧widget ，默认隐藏
  final Widget? rightWidget; //右侧widget ，默认隐藏
  final int? maxLength; //最大长度，默认20
  final bool? isShowDeleteBtn; //是否显示右侧删除按钮，默认不显示
  final List<TextInputFormatter>? inputFormatters;
  final _InputCallBack? inputCallBack;
  final _InputSubmitted? inputSubmitted; //输入完成回调
  final String? pwdOpen; //自定义密码图片路径 睁眼
  final String? pwdClose; //自定义密码图片路径 闭眼
  final InputBorder? border; //边框样式
  final bool? isDense; //是否紧凑显示，默认false

  const JhTextField({
    Key? key,
    this.text: '',
    this.keyboardType: TextInputType.text,
    this.textInputAction: TextInputAction.done,
    this.isOnclick = true,
    this.hintText: '',
    this.labelText,
    this.controller,
    this.focusNode,
    this.isPwd = false,
    this.leftWidget,
    this.rightWidget,
    this.maxLength: 20,
    this.isShowDeleteBtn = false,
    this.inputFormatters,
    this.inputCallBack,
    this.inputSubmitted,
    this.pwdOpen,
    this.pwdClose,
    this.border,
    this.isDense: false,
  }) : super(key: key);

  @override
  _JhTextFieldState createState() => _JhTextFieldState();
}

class _JhTextFieldState extends State<JhTextField> {
  TextEditingController? _textController;
  FocusNode? _focusNode;
  bool? _isShowDelete;
  bool? _isHideenPwdBtn; //是否隐藏 右侧密码明文切换按钮 ，密码样式才显示（isPwd =true），
  bool? _pwdShow; //控制密码 明文切换
  Widget? _pwdImg; //自定义密码图片

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    _textController =
        widget.controller != null ? widget.controller : TextEditingController();
    _textController!.text = widget.text!;
    _focusNode = widget.focusNode != null ? widget.focusNode : FocusNode();
    _isHideenPwdBtn = !widget.isPwd!;
    _pwdShow = widget.isPwd;

    _isShowDelete = _focusNode!.hasFocus && _textController!.text.isNotEmpty;
    _textController!.addListener(() {
      setState(() {
        _isShowDelete =
            _textController!.text.isNotEmpty && _focusNode!.hasFocus;
      });
    });
    _focusNode!.addListener(() {
      setState(() {
        _isShowDelete =
            _textController!.text.isNotEmpty && _focusNode!.hasFocus;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    if (widget.pwdOpen != null && widget.pwdClose != null) {
      if (widget.pwdOpen!.isNotEmpty && widget.pwdClose!.isNotEmpty) {
        _pwdImg = _pwdShow!
            ? ImageIcon(AssetImage(widget.pwdClose!))
            : ImageIcon(AssetImage(widget.pwdOpen!));
      } else {
        _pwdImg = Icon(_pwdShow! ? Icons.visibility_off : Icons.visibility);
      }
    } else {
      _pwdImg = Icon(_pwdShow! ? Icons.visibility_off : Icons.visibility);
//      _pwdImg = _pwdShow?Image.asset("assets/images/ic_pwd_close.png",width: 18.0,):Image.asset("assets/images/ic_pwd_open.png",width: 18.0,);
//      _pwdImg = _pwdShow?ImageIcon(AssetImage("assets/images/ic_pwd_close.png")):ImageIcon(AssetImage("assets/images/ic_pwd_open.png")) ;
    }

    return Stack(
      alignment: Alignment.centerRight,
      children: <Widget>[
        TextField(
          focusNode: _focusNode,
          controller: _textController,
          keyboardType: widget.keyboardType,
          textInputAction: widget.textInputAction,
          enabled: widget.isOnclick,
          style: TextStyle(fontSize: 28.sp, color: _textColor),
          inputFormatters: widget.inputFormatters != null
              ? widget.inputFormatters
              : [LengthLimitingTextInputFormatter(widget.maxLength)],
          decoration: InputDecoration(
            contentPadding: const EdgeInsets.symmetric(vertical: 5),
            prefixIcon: widget.leftWidget,
            labelText: widget.labelText != null ? widget.labelText : null,
            hintText: widget.hintText,
            hintStyle: TextStyle(fontSize: 28.sp, color: Color(0xFFB4B4B4)),
            isDense: widget.isDense,
            border: OutlineInputBorder(borderSide: BorderSide.none),
          ),
          obscureText: _pwdShow!,
          onChanged: (value) {
            if (widget.inputCallBack != null) {
              widget.inputCallBack!(_textController!.text);
            }
          },
          onSubmitted: (text) {
            if (widget.inputSubmitted != null) {
              widget.inputSubmitted!(_textController!.text);
            }
          },
        ),
        Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Offstage(
              offstage: !widget.isShowDeleteBtn!,
              child: _isShowDelete!
                  ? IconButton(
                      icon: Icon(
                        Icons.cancel,
                        color: Color(0xFFC8C8C8),
                        size: 20,
                      ),
                      onPressed: () {
                        _textController!.text = "";
                        if (widget.inputCallBack != null) {
                          widget.inputCallBack!(_textController!.text);
                        }
                      })
                  : Text(""),
            ),
            Offstage(
                offstage: _isHideenPwdBtn!,
                child: IconButton(
//                  icon: Icon(_pwdShow ? Icons.visibility_off : Icons.visibility),
//                  icon: Image.asset("assets/images/ic_pwd_close.png",width: 18.0,),
                  icon: _pwdImg!,
                  iconSize: 18.0,
                  onPressed: () {
                    setState(() {
                      _pwdShow = !_pwdShow!;
                    });
                  },
                )),
            widget.rightWidget != null ? InkWell(
              child: widget.rightWidget!,
              onTap: (){
                if (widget.inputSubmitted != null) {
                  widget.inputSubmitted!(_textController!.text);
                }
              },
            ) : Container(),
          ],
        ),
      ],
    );
  }
}
